<template>
    <a-layout-sider breakpoint="lg" v-model="collapsed">
        <div class="logo">
            <!-- <span>{{collapsed ? "听雨" : "※听雨※ 的个人博客"}}</span> -->
            <div v-if="collapsed">
                <img src="https://s1.ax1x.com/2020/10/11/0cZtZ6.jpg" alt=""
                    style="width: 48px;height: 48px;border-radius: 50%;">
            </div>
            <div v-else>
                <span>{{collapsed ? "听雨" : "※听雨※ 的个人博客"}}</span>
            </div>
        </div>

        <a-menu theme="dark" mode="inline" @click="goToPage">
            <a-menu-item key="index">
                <a-icon type="dashboard" /><span>仪表盘</span>
            </a-menu-item>
            <!-- 文章管理 -->
            <a-sub-menu>
                <span slot="title">
                    <a-icon type="file" /><span>文章管理</span></span>
                <a-menu-item key="addart">
                    <a-icon type="form" /><span>写文章</span>
                </a-menu-item>
                <a-menu-item key="artlist">
                    <a-icon type="snippets" /><span>文章列表</span>
                </a-menu-item>
            </a-sub-menu>
            <!-- 分类管理 -->
            <a-menu-item key="catelist">
                <a-icon type="unordered-list" /><span>分类列表</span>
            </a-menu-item>


            <!-- 用户管理 -->
            <a-sub-menu>
                <span slot="title">
                    <a-icon type="user" /><span>用户管理</span>
                </span>

                <a-menu-item key="userlist">
                    <a-icon type="contacts" /><span>用户列表</span>
                </a-menu-item>
                <a-menu-item key="infolist">
                    <a-icon type="schedule" /><span>管理员信息</span>
                </a-menu-item>
            </a-sub-menu>
        </a-menu>


    </a-layout-sider>
</template>

<script>
    export default {
        data() {
            return {
                collapsed: false,
            }
        },
        created() {

        },
        mounted() {

        },
        //方法集
        methods: {
            goToPage(item) {
                this.$router.push('/' + item.key).catch((err) => err);
            }
        }
    }
</script>

<style scoped>
    .logo {
        height: 48px;
        margin: 16px;
        /* background-color: white; */
        color: #ffd04b;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
    }
</style>